import React, { useEffect, useRef } from 'react';
import { List, Checkbox, Modal, InputItem, Toast } from 'antd-mobile';
import { Button } from '@/pages/Recruitment/External/components';
import clone from 'lodash/clone';
import styles from './index.less';

const { CheckboxItem } = Checkbox;
const MoreSoftware = React.forwardRef(({ form, dataSource = [], onClose, visible, value, onChange, ...rest }, ref) => {
    const [selectData, setSelectData] = React.useState([]);
    const [searchValue, setSearchValue] = React.useState('');
    const [searchList, setSearchList] = React.useState([]);
    const [visible2, setVisible2] = React.useState(false);
    const scrollViewRef = useRef();
    const { getFieldProps } = form;

    const handleChange = (v, e) => {
        let selectArr = [...selectData];
        if (e.target.checked === true) {
            selectArr.push(v);
        } else {
            const newData = selectArr.filter(item => item !== v);
            selectArr = newData;
        }
        setSelectData(selectArr);
    };
    const searchListCheck = (v, e) => {
        let selectArr = [...selectData];
        if (e.target.checked === true) {
            selectArr.push(v);
        } else {
            const newData = selectArr.filter(item => item !== v);
            selectArr = newData;
        }
        setSelectData(selectArr);
        setSearchValue('');
    };
    const delectSelectData = i => {
        const newselectData = clone(selectData);
        newselectData.splice(newselectData.indexOf(i), 1);
        setSelectData(newselectData);
    };
    const addSelectData = i => {
        const newselectData = clone(selectData);
        if (newselectData.indexOf(i) === -1) {
            newselectData.push(i);
            setSelectData(newselectData);
            setSearchValue('');
            scrollViewRef.current.scrollTo(0, 0);
            form.setFieldsValue({
                softwareName: ''
            });
        }
    };

    // 关闭专业软件弹窗
    const handleCancel = () => {
        onClose(false);
        onChange(value);
        setSearchValue('');
        setTimeout(() => {
            setSelectData(value);
        }, 100);
    };
    // 关闭专业软件弹窗
    const handleSure = () => {
        onClose(false);
        onChange(selectData);
        setSearchValue('');
    };

    // const popModal = () => {
    //     Modal.prompt(
    //         '软件名称',
    //         '',
    //         [
    //             {
    //                 text: '取消'
    //             },
    //             {
    //                 text: '确定',
    //                 onPress: v =>
    //                     new Promise((resolve, reject) => {
    //                         if (v) {
    //                             if (v.length > 50) {
    //                                 Toast.info('文字不能超过50个字符');
    //                             } else {
    //                                 addSelectData(v);
    //                                 resolve();
    //                             }
    //                         } else {
    //                             Toast.info('请输入软件名称');
    //                             reject();
    //                         }
    //                     })
    //             }
    //         ],
    //         'default',
    //         null,
    //         ['请输入软件名称']
    //     );
    // };
    const renderSearchView = () => {
        if (searchList.length > 0) {
            return (
                <div>
                    <div className={styles.title}>你可能想找</div>
                    <List>
                        {searchList.map(i => {
                            if (i?.softName) {
                                return (
                                    <CheckboxItem
                                        key={i.softName}
                                        onChange={e => searchListCheck(i.softName, e)}
                                        checked={selectData?.indexOf(i.softName) > -1}
                                    >
                                        {i.softName}
                                    </CheckboxItem>
                                );
                            }
                            return '';
                        })}
                    </List>
                </div>
            );
        }
        // return <div>{searchValue}</div>;
        return (
            <div className={styles.noData}>
                暂时没有“{searchValue}”的结果
                <br />
                可以试试更换检索词,或创建软件
                <div style={{ marginTop: 15 }}>
                    <Button
                        type="primary"
                        inline
                        style={{ minWidth: 150 }}
                        onClick={() => {
                            setVisible2(true);
                            // popModal();
                        }}
                    >
                        创建软件
                    </Button>
                </div>
            </div>
        );
    };

    useEffect(() => {
        setSelectData(value || []);
    }, [value]);

    return (
        <div ref={ref} {...rest}>
            <Modal
                popup
                visible={visible}
                animationType="slide-up"
                maskClosable={false}
                title={
                    <div className={styles.titleCtr}>
                        <span className={styles.cancelBtn} onClick={handleCancel}>
                            取消
                        </span>
                        <span className={styles.titleInfo}>更多软件</span>
                        <span className={styles.sureBtn} onClick={handleSure}>
                            确定
                        </span>
                    </div>
                }
            >
                <div className={styles.moreSoftwarePop}>
                    <div className={styles.searchView}>
                        <div className={styles.inputView}>
                            <i className="iconfont iconinput_search_icon" />
                            <InputItem
                                value={searchValue}
                                onChange={v => {
                                    setSearchValue(v);
                                    const arr = [];
                                    dataSource.map(item => {
                                        if (item.softName.indexOf(v) > -1) {
                                            arr.push(item);
                                        }
                                        return '';
                                    });
                                    setSearchList(arr);
                                }}
                            />
                        </div>
                        {searchValue ? (
                            <span
                                className={styles.cancelBtn}
                                onClick={() => {
                                    setSearchValue('');
                                }}
                            >
                                取消
                            </span>
                        ) : null}
                    </div>
                    <div className={styles.contentView} ref={scrollViewRef}>
                        {searchValue ? (
                            renderSearchView()
                        ) : (
                            <div>
                                {selectData.length > 0 ? (
                                    <div className={styles.edSelectValue}>
                                        <div className={styles.title}>已选择的软件</div>
                                        <List>
                                            {selectData &&
                                                selectData.map(i => (
                                                    <CheckboxItem key={i} checked>
                                                        <div className={styles.selectValueItem}>
                                                            <div className={styles.selectValueItemName}>{i}</div>
                                                            <i
                                                                className="iconfont iconDeleteIcon"
                                                                onClick={() => {
                                                                    delectSelectData(i);
                                                                }}
                                                            />
                                                        </div>
                                                    </CheckboxItem>
                                                ))}
                                        </List>
                                    </div>
                                ) : null}

                                <div>
                                    <div className={styles.title}>推荐软件</div>
                                    <List>
                                        {dataSource.map(i => (
                                            <CheckboxItem
                                                key={i.id}
                                                onChange={e => handleChange(i.softName, e)}
                                                checked={selectData?.indexOf(i.softName) > -1}
                                            >
                                                {i.softName}
                                            </CheckboxItem>
                                        ))}
                                    </List>
                                </div>
                                <div className={styles.footerBtn}>
                                    <Button
                                        type="primary"
                                        inline
                                        style={{ minWidth: 150 }}
                                        onClick={() => {
                                            setVisible2(true);
                                            // popModal();
                                        }}
                                    >
                                        创建软件
                                    </Button>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </Modal>
            <Modal
                popup
                visible={visible2}
                maskClosable={false}
                className={styles.modalfix1}
                wrapClassName={styles.modalfix}
                animationType="slide-up"
            >
                <div role="document" className="am-modal am-modal-transparent">
                    <div className="am-modal-content" style={{ border: '1px solid #ddd' }}>
                        <div className="am-modal-header">
                            <div className="am-modal-title">软件名称</div>
                        </div>
                        <div className="am-modal-body">
                            <div className="am-modal-propmt-content">
                                <div>
                                    <div className="am-modal-input-container">
                                        <div className="am-modal-input">
                                            <InputItem
                                                clear
                                                {...getFieldProps('softwareName', {
                                                    initialValue: searchValue
                                                })}
                                                placeholder="请输入软件名称"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="am-modal-footer">
                            <div className="am-modal-button-group-h am-modal-button-group-normal" role="group">
                                <a
                                    className="am-modal-button"
                                    onClick={() => {
                                        form.setFieldsValue({
                                            softwareName: ''
                                        });
                                        setVisible2(false);
                                    }}
                                >
                                    取消
                                </a>
                                <a
                                    className="am-modal-button"
                                    onClick={() => {
                                        const v = form.getFieldValue('softwareName');
                                        if (v) {
                                            if (v.length > 50) {
                                                Toast.info('文字不能超过50个字符');
                                            } else {
                                                setVisible2(false);
                                                addSelectData(v);
                                            }
                                        } else {
                                            Toast.info('请输入软件名称');
                                        }
                                    }}
                                >
                                    确定
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            {/* <Modal popup visible maskClosable={false}>
                <div></div>
            </Modal> */}
        </div>
    );
});

export default MoreSoftware;
